package com.example.myapplication.ui.common

import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

//自定义组件： 自定义底部导航栏的图标+文字组件
@Composable
fun BottomAppBarItem(
    normalIcon: ImageVector,  //未选中图标
    selectedIcon: ImageVector,  //选中图标
    text: String,    //文本
    selected: Boolean,   //是否被选中
    onClick: () -> Unit,   //点击事件
    modifier: Modifier    //用于自定义样式
) {
    //根据selected的状态来决定图标和文本的颜色
    var contentColor = if (selected) Color(0xff66dd79) else Color.DarkGray

    Column(
        modifier = modifier
            .fillMaxSize()
            .clickable(
                indication = null, // 关闭波纹
                interactionSource = remember { MutableInteractionSource() },
                onClick = { onClick() }),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Icon(
            imageVector = if (selected) selectedIcon else normalIcon,
            contentDescription = text,
            tint = contentColor,
            modifier = Modifier.size(30.dp)
        )

        Text(
            text = text,
            fontSize = 16.sp,
            color = contentColor,
            fontWeight = FontWeight.Medium
        )
    }
}
